<template>
	<scroll-view class="page b-bg haveBar" id="scrollWrap" scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower" lower-threshold="50" @scroll="scroll">
		<view class="userBox">
			<view class="logoBox" @tap='goIndex'>
				<image src="../../static/img/logo.png" mode="" class="logo"></image>
			</view>
			<user></user>
		</view>
		<banner :banner_image="banner_image"></banner>
		<view class="blockTab" :class="{fix:scorllUi.cri}">
			  <tab current="3" scrollLeft='300' :goId='goId'></tab>
		</view>
		<view class="blockIn" v-show="scorllUi.cri"></view>
		<view class="block work-works">
			<view class="work-works-inner">
				<view class="fil">
					<view class="formItems role">
						 <uni-data-select
							  v-model="form_data.role_id"
							  :localdata="rangeRole"
							  :clear="false"
							  @change="changeR"
							></uni-data-select>
					</view>
					<view class="formItems city">
						 <uni-data-select
							  v-model="form_data.awards_id"
							  :localdata="rangeAwards"
							  :clear="false"
							  @change="changeAwards"
							></uni-data-select>
					</view>
				</view>
				<view class="items">
					<view class="item-price" v-for="(item,index) in list" :key="index"  @tap="goDetail(item.id)">
						<view class="colloct">
							<text class="iconfont icon-aixin" v-if="item.is_collect" @tap.stop="uncollect(item)"></text>
							<text class="iconfont icon-a-aixin1" v-if="!item.is_collect" @tap.stop="collect(item)"></text>
						</view>
						<view class="imgBox" :style="{ backgroundImage: `url(${$ft.getCover(item.file_list)})`}"></view>
						<view class="in-title">
							{{item.title}}
						</view>
						<view class="onePrice">{{item.awards_name}}</view>
						<view class="in-f-title">
							{{item.username}}
						</view>
						<view class="in-f-title">
							{{item.school}}
						</view>
					</view>
					<view class="more-bottom">
						<text v-show="!page.is_bottom">加载中...</text>
						<text v-show="page.is_bottom">没有更多了></text>
					</view>
				</view>
			</view>
		</view>
		<barCon :is_up="is_up"></barCon>
		<share ref="showS"></share>
	</scroll-view>
</template>

<script>
	import mixin from '@/util/mixin.js';
	export default {
		mixins:[mixin],
		data() {
			return {
				form_data:{
					role_id:"",
					rangeAwards:""
				},
				rangeRole:[],
				rangeAwards:[],
				page:{
					is_bottom:false,
					page:1
				},
				scorllUi:{
					height:"",
					cri:false
				},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				tabLeft:0,
				goId:"",
				list:[]
			};
		},
		onLoad(options){
			//console.log(this.refs.tab.goScroll());
			// this.refs.tab.goScroll();
			this.goId = options.id;
			console.log(this.goId);
			this.scorllUi.height = 500 / 750 * window.innerWidth;
			this.getRole();
		},
		methods:{
			showShare() {
				this.showShareEvent();
			},
			showShareEvent() {
				this.$refs.showS.show();
			},
			async getRole(){
				const res = await this.$httpPub({
					  url:'activity/role/' + this.goId,
					  method:'get',
					  data:{}
				})
				this.rangeRole = res.map((item) => {
					return {
						text:item.name,
						value:item.id
					}
				})
				this.rangeRole.unshift({
					text:'全部角色',
					value:""
				})
				this.getAwray();
			},
			async getAwray(){
				const res = await this.$httpPub({
					  url:'activity/awards/' + this.goId,
					  method:'get',
					  data:{}
				})
				this.rangeAwards = res.map((item) => {
					return {
						text:item.name,
						value:item.id
					}
				})
				this.rangeAwards.unshift({
					text:'全部奖项',
					value:""
				})
				this.render(null);
			},
			async render(res) {
				if(res) {
					this.list = [];
					this.form_data = res;
					this.page = {
						is_bottom:false,
						page:1
					}
				} 
				if(!this.page.is_bottom) {
					let postData = {
						page:this.page.page,
						page_count:8,
						...this.form_data
					}
					const res = await this.$http({
						  url:'article/awards-top/' + this.goId,
						  method:'get',
						  data:postData
					})
					console.log("res",res);
					if(!res) {
						this.list = [];
						this.form_data = res;
						this.page = {
							is_bottom:false,
							page:1
						}
						return;
					}
					this.list.push(...res.data);
					// console.log(this.list);
					if(res.current_page == res.last_page || res.total == 0) {
						this.page.is_bottom = true;
					} else {
						this.page.page ++;
					}
				}
			},
			async changeR() {
				this.render(this.form_data);
			},
			async changeR() {
				this.render(this.form_data);
			},                
			async changeAwards(e) {
				this.render(this.form_data);
			},
			async collect(item) {
				console.log(item);
				const res = await this.$http({
					  url:'user/collect',
					  method:'post',
					  data:{
						  id:item.id
					  }
				})
				if(res) {
					item.collect_id = res.id;
					item.is_collect = 1;
					this.toast('收藏成功')
				}
			},
			async uncollect(item) {
				console.log(item);
				const res = await this.$http({
					  url:'user/collect',
					  method:'post',
					  data:{
						  collect_id:item.collect_id
					  }
				})
				
				if(res) {
					item.collect_id = 0;
					item.is_collect = 0; 
					this.toast('取消成功')
				}
				return false;
			},
			
			scrolltolower() {
				this.render(null);
			},
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop;
				// console.log(this.old.scrollTop);
				// console.log(this.old.scrollTop);
				// console.log(this.scorllUi);
				if(this.old.scrollTop > this.scorllUi.height) {
					this.scorllUi.cri = true;
				} else {
					this.scorllUi.cri = false;
				}
			}
			
		}
	}
</script>

<style lang="scss">
	#scrollWrap {
		width: 100%;
		height: 100%;
	}
   .work-works {
	  .work-works-inner {
		  background-color: #fff;
		  padding: 30rpx 20rpx;
		  border-radius: $border-radius;
	  }
	  .items {
	  	  display: flex;
	  	  justify-content: space-between;
	  	  flex-wrap: wrap;
		  padding-top: 26rpx;
	  	  .item-price {
	  		  width: 310rpx;
	  		  padding-bottom: 32rpx;
	  		  position: relative;
			  .onePrice {
				  background-color: #f24545;
				  border-radius:20rpx 0 20rpx 0;
				  color:#fff;
				  display: inline-block;
				  font-size: 12rpx;
				  padding: 6rpx 18rpx;
				  margin-right: 10rpx;
				  &.two {
					  background-color: #ffad4c;
				  }
			  }
			  .colloct {
				  position: absolute;
				  right: 0;
				  top:0;
				  width: 100rpx;
				  height: 100rpx;
				  color:#f24545;
				  @include center()
				  .iconfont {
					  font-size: 56rpx;
				  }

			  }
			  .tpBtn {
				  width: 100%;
				  height: 67rpx;
				  background-color: #f24545;
				  color: #fff;
				  margin-top: 20rpx;
				  border-radius: 8rpx;
				  font-size: 30rpx;
				  @include center();
				  &.disable{
					  background-color: #f5dede;
					  color:#fff;
				  }
			  }
	  		  .in-lab {
	  			  position: absolute;
	  			  right: 0;
	  			  top:0;
	  			  border-radius: 0 $border-radius 0 $border-radius !important;
	  			  padding: 8rpx 18rpx;
	  			  background-color: #f24545;
	  			  color:#fff;
	  			  font-size: 26rpx;
	  			  &.disable {
	  				  background-color: #e3cbcb;
	  				  color:#fff;
	  			  }
	  		  }
	  		  .imgBox {
	  		  		width: 100%;
	  				height: 232rpx;
	  				border-radius: $border-radius;
	  				overflow: hidden;
	  		  }
	  		  .in-title {
	  			  padding-top: 20rpx;
	  			  height: 100rpx;
	  			  font-size: 30rpx;
	  			  font-weight: 550;
	  			  @include textTwo();
	  		  }
	  		  .in-f-title {
	  			  padding-top: 18rpx;
	  			  font-size: 28rpx;
	  			   @include text();
	  		  }
	  		  .in-time {
	  			  padding-top: 18rpx;
	  			  font-size: 26rpx;
	  			  color:#cccccc;
	  		  }
	  	  }
	  }
   }
   .fil {
   				// position: absolute;
   				// top:325rpx;
   				width: 100%;
   				// padding: 0 35rpx;
   				display: flex;
   				box-sizing: border-box;
   				justify-content: space-between;
   			}
   	.formItems {
   		// margin-right: 25rpx;
   		.fiterTag {
   			width: 198rpx;
   			height: 64rpx;
   			border: 2px solid #3e4860 !important;
   			border-radius: 10rpx;
   			background-color: #fff;
   			display: flex;
   			padding: 0 30rpx;
   			justify-content: space-between;
   			box-sizing: border-box;
   			align-items: center;
   			font-size: 26rpx;
   		}
   		&.role {
   			width: 300rpx;
   		}
   		&.city {
   			width: 300rpx;
   		}
   	}
   .page {
   		.add-form {
   			padding: 0;
   		}
   	}
   .block {
   	  width: 100%;
   	  padding: 0rpx 34rpx 40rpx;
   }
   .work-infoBox {
   	       // padding-bottom: 0;
   	   .work-inner {
   		   background-color: #fff;
   		   padding: 28rpx;
   		   padding-bottom: 7rpx;
   		   border-radius: $border-radius;
   		   .img-title {
   			   width: 281rpx;
   			   height: 66rpx;
   		   }
   		   .work-cont {
   			   font-size: 28rpx;
   			   line-height: 1.6;
   			   .p {
   				   margin-bottom: 20rpx;
   			   }
   		   }
   	   }
   }
</style>

